<template>
  <div class="table-box">
    <ProTable title="角色列表" ref="proTableRef" row-key="id" :columns="columns" highlight-current-row :request-api="loadData">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <ElButton type="primary" :icon="CirclePlus" @click="onAddClicked">新增</ElButton>
      </template>
      <!-- 角色标识 -->
      <template #code="scope">
        <ElTag>{{ scope.row.code }}</ElTag>
      </template>
      <!-- 角色操作 -->
      <template #operation="scope">
        <ElButton type="primary" link :icon="Menu" @click="onAuthClicked(scope.row)">权限</ElButton>
        <ElButton type="primary" link :icon="View" @click="onViewClicked(scope.row)">查看</ElButton>
        <ElButton type="primary" link :icon="EditPen" @click="onEditClicked(scope.row)">编辑</ElButton>
        <ElButton type="primary" link :icon="Delete" @click="onDeleteClicked(scope.row)">删除</ElButton>
      </template>
    </ProTable>
    <RoleForm ref="formRef" @success="refresh" />
    <RoleMenuForm ref="menuFormRef" />
  </div>
</template>

<script setup lang="ts" name="ZLRole">
import { CirclePlus, Delete, EditPen, View, Menu } from '@element-plus/icons-vue'
import ProTable from '@/components/ProTable/index.vue'
import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import { Role } from '@api/uc/role/interface'
import RoleForm from '@views/uc/role/role-form.vue'
import RoleMenuForm from '@views/uc/role/role-menu-form.vue'
import { pageRole, removeRole } from '@api/uc/role'
import { FormType } from '@/enums'
const proTableRef = ref<ProTableInstance>()

// 打开 drawer(新增、查看、编辑)
const formRef = ref<InstanceType<typeof RoleForm> | null>(null)

// 打开 权限drawer(新增、查看、编辑)
const menuFormRef = ref<InstanceType<typeof RoleMenuForm> | null>(null)

function getIndex(index: number) {
  const { current, size } = proTableRef.value!.pageable
  return (current - 1) * size + index + 1
}

// 表格配置项
const columns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 60, index: getIndex },
  { prop: 'name', label: '角色名称', align: 'left', width: 300, search: { el: 'input' } },
  { prop: 'code', label: '角色编码', align: 'left', width: 300, search: { el: 'input' } },
  { prop: 'desc', label: '描述' },
  { prop: 'operation', label: '操作', fixed: 'right', width: 330 }
]

// 加载数据
function loadData(query: Role.Query) {
  query.order = 'update_time desc'
  return pageRole(query)
}

// 刷新列表
function refresh() {
  proTableRef.value?.getTableList()
}

// 添加角色
function onAddClicked() {
  formRef.value?.open(FormType.ADD)
}

// 查看角色
const onViewClicked = (row: any) => {
  formRef.value?.open(FormType.VIEW, row.id)
}

// 编辑角色
function onEditClicked(row: any) {
  formRef.value?.open(FormType.EDIT, row.id)
}

// 删除角色
function onDeleteClicked(row: any) {
  ElMessageBox.confirm('您确定要删除该角色吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      removeRole(row.id).then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功!'
        })
        proTableRef.value?.getTableList()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'warning',
        message: '删除取消!'
      })
    })
}

function onAuthClicked(row: any) {
  menuFormRef.value?.open(row.id)
}
</script>
